<template>
  <div>
    <a-card class="author-info-card" hoverable>
      <img src="@/assets/my-back.jpg" class="avatar-back-img">
      <img :src="admin.header" class="avatar-img">
      <div class="panel-container">
        <div class="author-bottom-container">
          <div class="author-nickname" v-text="admin.name" />
          <div class="author-signature" v-text="admin.signature" />
          <a-divider />
          <div class="social-container">
            <div class="social-text">社交：</div>
            <div class="social-item">
              <a href="http://wpa.qq.com/msgrd?v=3&uin=1035264115&site=qq&menu=yes" target="_blank">
                <img src="@/assets/icons/qq.png" class="social-icon">
              </a>
              <a href="https://me.csdn.net/EasonDongH" target="_blank">
                <img src="@/assets/icons/csdn.png" class="social-icon">
              </a>
              <a href="https://gitee.com/EasonDongH" target="_blank">
                <img src="@/assets/icons/gitee.png" class="social-icon">
              </a>
              <a href="https://github.com/EasonDongH" target="_blank">
                <img src="@/assets/icons/github.png" class="social-icon">
              </a>
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>
<script>
import adminApi from '@/api/admin'
export default {
  data() {
    return {
      admin: {}
    }
  },
  created() {
    this.getAdmin()
  },
  methods: {
    getAdmin() {
      adminApi.getAdmin().then(resp => {
        this.admin = resp.data
      })
    }
  }
}
</script>
<style>
.author-info-card .ant-card-body {
  padding: 0 !important;
}
.avatar-back-img {
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 0;
}
.avatar-img {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  border: 5px solid #e5e5e5;
  border-radius: 50%;
  margin: 75px auto 5px;
  z-index: 10;
}
.panel-container {
  width: 100%;
}
.author-bottom-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 85%;
  margin: auto;
  margin-bottom: 30px;
}
.author-nickname {
  font-size: 22px;
  font-weight: bold;
  line-height: 50px;
  margin: 0 auto;
}
.author-signature {
  font-size: 14px;
  color: #878d99;
}
.social-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.social-text {
  font-size: 15px;
  color: #878d99;
}
.social-icon {
  width: 40px;
  height: 40px;
}
.social-item {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
